/* styles.css */

/* 设置全局字体 */
body {
    font-family: Arial, sans-serif;
}

/* 设置 header 样式 */
header {
    background-color: black; /* 黑色背景 */
    color: white; /* 白色文字 */
    padding: 25px; /* 内边距 */
}

/* 设置导航栏样式 */
nav ul {
    list-style-type: none; /* 去除列表样式 */
    padding: 0; /* 去除默认内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐 */
}

/* 设置导航项样式 */
nav ul li {
    margin: 0 10px; /* 水平间距 */
}

/* 设置导航链接样式 */
nav ul li a {
    color: white; /* 白色文字 */
    text-decoration: none; /* 去除下划线 */
    padding: 5px 10px; /* 内边距 */
    display: block; /* 块级显示 */
    position: relative; /* 相对定位 */
    transition: background-color 0.3s, transform 0.3s; /* 平滑过渡效果 */
}

/* 悬停时背景颜色变化 */
nav ul li a:hover {
    background-color: #555555; /* 悬停时的背景颜色 */
}

/* 向右向下偏移 */
nav ul li a::after {
    content: ''; /* 生成伪元素 */
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度与链接相同 */
    height: 100%; /* 高度与链接相同 */

    z-index: -1; /* 确保伪元素在链接下方 */
    transition: transform 0.3s; /* 平滑过渡效果 */
}

/* 悬停时的偏移量 */
nav ul li a:hover::after {
    transform: translate(10px, 10px); /* 向右向下偏移 */
}

/* 用户资料样式 */
.user-profile {
    float: right; /* 右浮动 */
}

/* 新闻列表样式 */
.news-list {
    max-width: 600px; /* 最大宽度 */
    margin: 20px auto; /* 水平居中对齐 */
}

/* 单个新闻项样式 */
.news-item {
    border: 1px solid #ddd; /* 边框 */
    border-radius: 5px; /* 圆角 */
    padding: 10px; /* 内边距 */
    margin-bottom: 20px; /* 底部外边距 */
}
/* 标题样式 */
.news-item h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

/* 描述样式 */
.news-item p {
    font-size: 16px;
    color: #666;
    display: block; /* 确保不是 display: none */
}





/* 操作按钮样式 */
.actions button {
    margin-right: 10px; /* 右侧外边距 */
}

/* 分页样式 */
.pagination {
    text-align: center; /* 文本居中对齐 */
}

/* 下拉菜单样式 */
.dropdown {
    position: relative; /* 相对定位 */
    display: inline-block; /* 行内块级显示 */
    float: right; /* 右浮动 */
}

/* 下拉内容样式 */
.dropdown-content {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位 */
    min-width: 160px; /* 最小宽度 */
    z-index: 1; /* 层叠顺序 */
}

/* 下拉内容链接样式 */
.dropdown-content a {
    color: black; /* 黑色文字 */
    padding: 12px 16px; /* 内边距 */
    text-decoration: none; /* 去除下划线 */
    display: block; /* 块级显示 */
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #eaeaea; /* 边框 */
}

/* 下拉内容链接悬停样式 */
.dropdown-content a:hover {
    background-color: #f1f1f1; /* 悬停时的背景颜色 */
}

/* 下拉菜单悬停时显示内容 */
.dropdown:hover .dropdown-content {
    display: block; /* 显示下拉内容 */
}

/* 文本1样式 */
.text1 {
    float: right; /* 右浮动 */
}
/* 添加背景色和边框 */
.pagination .page-item .page-link {
    background-color: #007bff; /* 蓝色背景 */
    border-color: #007bff; /* 蓝色边框 */
    color: white; /* 白色文字 */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

/* 悬停时的样式 */
.pagination .page-item .page-link:hover {
    background-color: #0056b3; /* 暗蓝色背景 */
    border-color: #0056b3; /* 暗蓝色边框 */
    color: white; /* 白色文字 */
}

/* 当前选中的页面按钮样式 */
.pagination .page-item.active .page-link {
    background-color: #0056b3; /* 暗蓝色背景 */
    border-color: #0056b3; /* 暗蓝色边框 */
    color: white; /* 白色文字 */
    cursor: default; /* 更改鼠标指针为默认状态 */
}